<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue基础</title>
</head>

<body>
  <div id="app">
    <!-- 想让该区域支持vue语法 -->
    {{message}}
    <div>数量：{{count}}</div>
    <button v-on:click="addhandler(1,2,$event)">+++</button> 指令
    <button @click="count++">+++</button>
    <button id="btn1">bnt1</button>
  </div>
  <!-- 数据驱动，数据一变视图就变 -->
  <!-- 1、引入vue文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
  <script>
    // 2、创建vue实例
    const app = new Vue({
      // 指明vue作用的区域（挂载的元素）
      el: '#app',
      // data中的数据受vue监控
      data: {
        message: 'hello world',
        count: 0
      },
      methods: {
        // 事件处理函数
        addhandler(a, b) {
          this.count++;
          console.log(a, b);
          console.log(event);
        }
      }
    });

    const obj = {
      name: 'lisi',
      eat: function () {

      },
      eat() {

      }
    }
    const btn1 = document.getElementById('btn1');
    btn1.onclick = function (e) {
      console.log(e);
      e.stopPropagation();//阻止时间冒泡
      e.preventDefault();//阻止默认行为（阻止a标签的刷新）
    }
  </script>
</body>

</html>